<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="back-btn" @click="navigateBack">
        <uni-icons type="left" size="24" color="#fff"></uni-icons>
      </view>
     
    </view>
    
    <!-- 商品图片轮播 -->
    <view class="image-swiper">
      <swiper 
        :indicator-dots="true" 
        :autoplay="true" 
        :interval="5000" 
        :duration="500"
        circular
      >
        <swiper-item v-for="(image, index) in JSON.parse(product.images)" :key="index">
          <image :src="image.url" mode="aspectFill"></image>
        </swiper-item>
      </swiper>
    </view>
    
    <!-- 商品基本信息 -->
    <view class="product-info">
      <view class="product-title">
        <text>{{ product.title }}</text>
      </view>
      <view class="product-price">
        <text class="price">¥{{ product.price }}</text>
        <text class="original-price" v-if="product.originalPrice">¥{{ product.originalPrice }}</text>
        <text class="discount" v-if="false">({{ ((product.price / product.originalPrice) * 10).toFixed(1) }}折)</text>
      </view>
      <view class="product-tags" v-if="false">
        <text class="tag" v-for="(tag, index) in product.tags" :key="index">{{ tag }}</text>
      </view>
      <view class="product-status" v-if="false">
        <text class="status">{{ product.status }}</text>
        <text class="view-count">{{ product.viewCount }}人看过</text>
      </view>
    </view>
    
    <!-- 卖家信息 -->
    <view class="seller-info" v-if="false">
      <view class="seller-avatar">
        <image :src="product.userAvatar" mode="aspectFill"></image>
      </view>
      <view class="seller-detail">
        <text class="seller-name">{{ product.userName }}</text>
        <text class="seller-school">{{ product.school }}</text>
      </view>
      <view class="seller-rating">
        <text class="rating-text">好评率 {{ product.rating }}%</text>
        <view class="rating-stars">
          <uni-icons type="star-filled" size="16" color="#FFD700" v-for="i in 5" :key="i" :style="{ opacity: i <= product.rating / 20 ? 1 : 0.3 }"></uni-icons>
        </view>
      </view>
      <view class="contact-btn" @click="contactSeller">
        <text>联系卖家</text>
      </view>
    </view>
    
    <!-- 商品详情描述 -->
    <view class="product-detail">
      <view class="detail-title">
        <text>商品详情</text>
      </view>
      <view class="detail-content">
        <text>{{ product.description }}</text>
      </view>
      <view class="detail-images">
        <image :src="image" mode="aspectFill" v-for="(image, index) in product.detailImages" :key="index"></image>
      </view>
    </view>
    
    <!-- 商品位置 -->
    <view class="product-location" v-if="false">
      <view class="location-title">
        <text>商品位置</text>
      </view>
      <view class="location-info">
        <uni-icons type="location-filled" size="18" color="#FF5C7C"></uni-icons>
        <text>{{ product.location }}</text>
      </view>
    </view>
    
    <!-- 评论区 -->
    <view class="comments-section" v-if="false">
      <view class="comments-title">
        <text>商品评价 ({{ product.comments.length }})</text>
      </view>
      <view class="comments-list">
        <view class="comment-item" v-for="(comment, index) in product.comments" :key="index">
          <view class="comment-header">
            <image class="comment-avatar" :src="comment.avatar" mode="aspectFill"></image>
            <view class="comment-user">
              <text class="comment-name">{{ comment.userName }}</text>
              <text class="comment-time">{{ comment.time }}</text>
            </view>
          </view>
          <view class="comment-content">
            <text>{{ comment.content }}</text>
          </view>
          <view class="comment-reply" v-if="comment.reply">
            <text class="reply-label">卖家回复：</text>
            <text class="reply-content">{{ comment.reply }}</text>
          </view>
        </view>
      </view>
      <view class="view-all-comments" @click="viewAllComments">
        <text>查看全部评论</text>
        <uni-icons type="arrowright" size="14" color="#999"></uni-icons>
      </view>
    </view>
    
    <!-- 推荐商品 -->
    <view class="recommended-products" v-if="false">
      <view class="recommended-title">
        <text>猜你喜欢</text>
      </view>
      <view class="products-scroll">
        <view class="product-card" v-for="(item, index) in recommendedProducts" :key="index" @click="navigateToProduct(item.id)">
          <view class="card-image">
            <image :src="item.images[0]" mode="aspectFill"></image>
          </view>
          <view class="card-info">
            <text class="card-title">{{ item.title }}</text>
            <text class="card-price">¥{{ item.price }}</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 底部操作栏 -->
    <view class="action-bar">
  <!--    <view class="action-item" @click="addToFavorite">
        <uni-icons :type="product.liked ? 'heart-filled' : 'heart'" size="24" :color="product.liked ? '#FF5C7C' : '#666'"></uni-icons>
        <text>{{ product.liked ? '已收藏' : '收藏' }}</text>
      </view> -->
   <!--   <view class="action-item" @click="shareProduct">
        <uni-icons type="share" size="24" color="#666"></uni-icons>
        <text>分享</text>
      </view> -->
      <view class="contact-seller" @click="contactSeller">
        <text>联系卖家</text>
      </view>
      <view class="buy-now" @click="buyNow">
        <text>立即购买</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      product: {
        id: 1,
        title: '九成新 MacBook Pro 13寸 2020款',
        price: 6899,
        originalPrice: 12800,
        status: '闲置中',
        viewCount: 238,
        tags: ['电子产品', '电脑', 'Mac'],
        images: [
          '/static/macbook1.jpg',
          '/static/macbook2.jpg',
          '/static/macbook3.jpg'
        ],
        userAvatar: '/static/avatar1.png',
        userName: '科技爱好者',
        school: '清华大学',
        rating: 98,
        description: '2020年购买的MacBook Pro 13寸，M1芯片，8G内存，256G硬盘。使用频率不高，外观九成新，无任何磕碰和故障。附带原装充电器和包装盒。因升级设备所以出售。',
        detailImages: [
          '/static/macbook-detail1.jpg',
          '/static/macbook-detail2.jpg',
          '/static/macbook-detail3.jpg'
        ],
        location: '清华大学紫荆公寓',
        comments: [
          {
            avatar: '/static/comment-avatar1.png',
            userName: '校园数码达人',
            time: '3天前',
            content: '这个价格很划算了，M1芯片性能很强，适合学生党。',
            reply: '谢谢支持！确实用着很流畅，只是我需要更大内存所以换了。'
          },
          {
            avatar: '/static/comment-avatar2.png',
            userName: '编程小白',
            time: '1周前',
            content: '请问这个电脑适合编程吗？我主要学Python和Java。',
            reply: '完全没问题，M1芯片对编程支持很好，而且续航超强。'
          },
          {
            avatar: '/static/comment-avatar3.png',
            userName: '设计系学生',
            time: '2周前',
            content: '屏幕显示效果怎么样？我平时需要修图。',
            reply: 'Retina屏幕显示效果非常好，色彩也很准，适合设计工作。'
          }
        ],
        liked: false
      },
      recommendedProducts: [
        // 推荐商品数据
        {
          id: 2,
          title: '女生冬季羽绒服 仅穿一次',
          price: 299,
          images: ['/static/clothes.jpg']
        },
        {
          id: 3,
          title: '全套《哈利波特》中英文版',
          price: 350,
          images: ['/static/books.jpg']
        },
        {
          id: 4,
          title: '宜家双人沙发 自提',
          price: 850,
          images: ['/static/sofa.jpg']
        },
        {
          id: 5,
          title: '乐高星球大战系列 未开封',
          price: 1200,
          images: ['/static/lego.jpg']
        },
        {
          id: 6,
          title: '小米手环7 黑色',
          price: 189,
          images: ['/static/bracelet.jpg']
        }
      ]
    }
  },
  onLoad(options) {
    // 从路由参数获取商品ID，这里使用模拟数据
    const productId = options.id || 1;
    // 实际项目中应该根据ID从服务器获取商品详情
    this.loadProductDetail(productId);
  },
  methods: {
    // 导航相关方法
    navigateBack() {
      uni.navigateBack();
    },
    navigateToProduct(id) {
      uni.navigateTo({
        url: `/pages/detail/detail?id=${id}`
      });
    },
    
    // 加载商品详情（实际项目中应该是API请求）
    async loadProductDetail(id) {
      // 模拟API请求延迟
	  const res = await this.$api.get('/SecondGoods/get',{id:id},true)
	  if(res.data.code === 200) {
		  this.product = res.data.data
	  }
    },
    
    // 收藏商品
    addToFavorite() {
      this.product.liked = !this.product.liked;
      
      // 添加收藏动画
      const favoriteIcon = this.$refs.favoriteIcon;
      if (this.product.liked) {
        favoriteIcon.classList.add('like-animation');
        setTimeout(() => {
          favoriteIcon.classList.remove('like-animation');
        }, 300);
      }
      
      // 实际项目中应该调用API保存收藏状态
      // if (this.product.liked) {
      //   api.addToFavorite(this.product.id);
      // } else {
      //   api.removeFromFavorite(this.product.id);
      // }
    },
    
    // 联系卖家
    contactSeller() {
      uni.showModal({
        title: '联系卖家',
        content: `确定要联系 ${this.product.phone} 吗？`,
        success: (res) => {
          if (res.confirm) {
            // 实际项目中应该跳转到聊天页面或拨打电话
			uni.makePhoneCall({
				phoneNumber:JSON.stringify(this.product.phone)
			})
           
          }
        }
      });
    },
    
    // 分享商品
    shareProduct() {
      uni.showShareMenu({
        withShareTicket: true,
        menus: ['shareAppMessage', 'shareTimeline']
      });
    },
    
    // 立即购买
    buyNow() {
      uni.navigateTo({
        url: `/pagesA/confirmShop?productId=${this.product.id}`
      });
    },
    
    // 查看全部评论
    viewAllComments() {
      uni.navigateTo({
        url: `/pages/comments/comments?productId=${this.product.id}`
      });
    }
  }
}
</script>

<style>
.container {
  width: 100%;
  min-height: 100vh;
  background-color: #F8F8F8;
  position: relative;
}

/* 顶部导航栏 */
.nav-bar {
  position: fixed;
  top: 50px;
  left: 0;
  right: 0;
  padding: 0 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
}

.back-btn, .share-btn {
  width: 32px;
  height: 32px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 商品图片轮播 */
.image-swiper {
  width: 100%;
  height: 400px;
  background-color: #fff;
}

.image-swiper swiper {
  width: 100%;
  height: 100%;
}

.image-swiper image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 商品基本信息 */
.product-info {
  padding: 15px;
  background-color: #fff;
  margin-bottom: 10px;
}

.product-title text {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  line-height: 1.3;
}

.product-price {
  display: flex;
  align-items: baseline;
  margin: 10px 0;
}

.price {
  font-size: 24px;
  font-weight: bold;
  color: #FF5C7C;
  margin-right: 10px;
}

.original-price {
  font-size: 14px;
  color: #999;
  text-decoration: line-through;
  margin-right: 5px;
}

.discount {
  font-size: 14px;
  color: #FF5C7C;
}

.product-tags {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.tag {
  padding: 3px 8px;
  background-color: #FFF0F3;
  color: #FF5C7C;
  font-size: 12px;
  border-radius: 4px;
  margin-right: 8px;
  margin-bottom: 8px;
}

.product-status {
  display: flex;
  align-items: center;
  color: #999;
  font-size: 12px;
}

.status {
  margin-right: 15px;
}

/* 卖家信息 */
.seller-info {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #fff;
  margin-bottom: 10px;
}

.seller-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 10px;
}

.seller-avatar image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.seller-detail {
  flex: 1;
  margin-right: 10px;
}

.seller-name {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  display: block;
  margin-bottom: 3px;
}

.seller-school {
  font-size: 12px;
  color: #999;
}

.seller-rating {
  display: flex;
  align-items: center;
  margin-right: 15px;
}

.rating-text {
  font-size: 12px;
  color: #666;
  margin-right: 5px;
}

.rating-stars {
  display: flex;
}

.contact-btn {
  padding: 8px 15px;
  background-color: #FF5C7C;
  color: #fff;
  border-radius: 20px;
  font-size: 14px;
}

/* 商品详情描述 */
.product-detail {
  background-color: #fff;
  margin-bottom: 10px;
}

.detail-title {
  padding: 15px;
  border-bottom: 1px solid #F5F5F5;
}

.detail-title text {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.detail-content {
  padding: 15px;
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

.detail-images {
  padding: 0 15px 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.detail-images image {
  width: calc(33.333% - 7px);
  height: 100px;
  object-fit: cover;
  border-radius: 5px;
}

/* 商品位置 */
.product-location {
  background-color: #fff;
  margin-bottom: 10px;
}

.location-title {
  padding: 15px;
  border-bottom: 1px solid #F5F5F5;
}

.location-title text {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.location-info {
  padding: 15px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #666;
}

.location-info uni-icons {
  margin-right: 8px;
}

/* 评论区 */
.comments-section {
  background-color: #fff;
  margin-bottom: 10px;
}

.comments-title {
  padding: 15px;
  border-bottom: 1px solid #F5F5F5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.comments-title text {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.comments-list {
  padding: 0 15px;
}

.comment-item {
  padding: 15px 0;
  border-bottom: 1px solid #F5F5F5;
}

.comment-item:last-child {
  border-bottom: none;
}

.comment-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.comment-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 10px;
}

.comment-user {
  flex: 1;
}

.comment-name {
  font-size: 14px;
  color: #333;
  display: block;
}

.comment-time {
  font-size: 12px;
  color: #999;
}

.comment-content {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.comment-reply {
  background-color: #F8F8F8;
  padding: 10px;
  border-radius: 5px;
}

.reply-label {
  font-size: 12px;
  color: #999;
  margin-right: 5px;
}

.reply-content {
  font-size: 14px;
  color: #666;
}

.view-all-comments {
  padding: 15px 0;
  text-align: center;
  color: #999;
  font-size: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.view-all-comments uni-icons {
  margin-left: 5px;
}

/* 推荐商品 */
.recommended-products {
  background-color: #fff;
  margin-bottom: 70px;
}

.recommended-title {
  padding: 15px;
  border-bottom: 1px solid #F5F5F5;
}

.recommended-title text {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.products-scroll {
  padding: 15px 0 15px 15px;
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.product-card {
  width: 120px;
  margin-right: 15px;
  background-color: #F8F8F8;
  border-radius: 8px;
  overflow: hidden;
}

.card-image {
  width: 100%;
  height: 120px;
}

.card-image image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-info {
  padding: 8px;
}

.card-title {
  font-size: 12px;
  color: #333;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 5px;
}

.card-price {
  font-size: 14px;
  font-weight: 500;
  color: #FF5C7C;
}

/* 底部操作栏 */
.action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: #fff;
  border-top: 1px solid #E5E5E5;
  display: flex;
  align-items: center;
  z-index: 100;
}

.action-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.action-item text {
  font-size: 10px;
  margin-top: 2px;
}

.contact-seller {
  flex: 2;
  height: 100%;
  background-color: #FF9EAC;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.buy-now {
  flex: 2;
  height: 100%;
  background-color: #FF5C7C;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

/* 动画效果 */
.like-animation {
  animation: likeScale 0.3s ease;
}

@keyframes likeScale {
  0% { transform: scale(1); }
  50% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
</style>